<script setup name="mycard" lang='ts'>
/*
* 别人的不好用，自己写一个
* */
import { defineProps} from "vue"
const props = defineProps({
  title:{
    type:String,
    default:null,
  },
  round:{
    type:Boolean,
    default:false,
  },
  loading:{
    type:Boolean,
    default:false,
  },
})
</script>

<template>
  <div class="overflow-hidden bg-white border-1 border-gray-200  p-1px flex flex-col" :class="{'rounded-md':props.round,}">
    <slot name="header">
      <div v-if="props.title" class="w-full h-8 flex justify-between items-center px-2 py-1">
        <slot name="title">
          <span class="text-2xl font-semibold">{{props.title}}</span>
        </slot>
        <slot name="header"></slot>
      </div>
    </slot>
    <div class="relative w-full flex-1">
      <slot name="default"></slot>
      <div v-show="props.loading" class="absolute inset-0 z-10 bg-white bg-opacity-50 juzhong1">
        <myloadicon></myloadicon>
      </div>
    </div>
    <slot name="footer"></slot>
  </div>
</template>


<style scoped>

</style>
